<!-- 投诉已办 - 详情 -->
<template>
	<view class="no-warpper">
		<view class="nl-shadow-box">
			<view class="nl-flex-list">
				<text>{{complaintInfo.typeCdName}}编号</text>
				<view class="right-grey">{{complaintInfo.complaintId}}</view>
			</view>
			<view class="nl-flex-list">
				<text>{{complaintInfo.typeCdName}}人</text>
				<view class="right-grey">{{complaintInfo.complaintName}}</view>
			</view>
			<view class="nl-flex-list">
				<text>所属房屋</text>
				<view class="right-grey">{{complaintInfo.roomName}}</view>
			</view>
			<view class="nl-flex-list">
				<text>联系方式</text>
				<view class="right-grey">{{complaintInfo.tel}}</view>
				<view class="button-mini line m8" @click="callPhone(complaintInfo.tel)">
					<button>拨打</button>
				</view>
			</view>
			<view class="nl-flex-list">
				<text>{{complaintInfo.typeCdName}}时间</text>
				<view class="right-grey">{{complaintInfo.createTime}}</view>
			</view>
			<view class="nl-flex-list">
				<text>{{complaintInfo.typeCdName}}内容</text>
				<view class="right-grey">{{complaintInfo.context}}</view>
			</view>
		</view>
		<!-- 工单详情列表 -->
		<view class="cu-timeline">
			<view class="cu-item " v-for="(item,index) in audits" :key="index">
				<view class="nl-shadow-box workDetails nl-margin-bottom-md">
					<view v-if="item.state == '1001'">
						<text>{{item.auditName}} 于</text> {{item.auditTime}} 处理完成
					</view>
					<view v-if="item.state == '2002'">
						<text>{{item.auditName}}</text>正在处理
					</view>
				</view>
				
				<view class="nl-shadow-box workDetails nl-margin-bottom-md" v-if="item.state == '1001'">
					<view :class="complaintState == '1100' ? 'agree':'refuse'">
						<text>{{complaintState == '1100'?'已处理':'拒绝处理'}}：</text>
						{{item.message}}
					</view>
				</view>
			</view>
		</view>

		<u-modal v-model="modalShow" @confirm="modalConfirm" content='是否拨打电话？' show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	import {
		listWorkflowAuditInfo,
		getListAuditComplaints
	} from 'api/complaint.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				audits: [],
				complaintInfo: {},
				complaintId: '',
				roomId:'',
				modalShow:false,
				phone:'',
				complaintState:''
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option)
			this.complaintId = option.complaintId
			this.roomId = option.roomId
			this.complaintInfo = option
			this.getListWorkflowAuditInfo()
		},
		methods: {
			/**
			 * 获取工单时间轴
			 */
			getListWorkflowAuditInfo() {
				let that = this
				const data = {
					businessKey: this.complaintId,
					communityId: this.userCommunity.communityId,
					compaintId:this.complaintId,
					roomId:this.roomId
				}
				listWorkflowAuditInfo(data).then(res => {
					// 因后端字段有变化
					that.complaintState = res.complaintDto.complaintState
					that.audits = res.workflowAuditInfoDataVos
					console.log("结果", that.audits)
				})
			},
			/**
			 * 拨打电话
			 */
			callPhone(link){
				this.modalShow = true
				this.phone = link
			},
			modalConfirm(){
				uni.makePhoneCall({
				    phoneNumber: this.phone
				});
			}
		}
	}
</script>

<style lang="scss">
	.nl-flex-list {
		text {
			width: 120rpx;

			display: block;
			text-align-last: justify;
		}
	}

	.nl-flex-list:last-child {
		align-items: flex-start;
		margin-bottom: 0;

		text {
			height: 100rpx;
			line-height: 100rpx;
		}

		.right-grey {
			padding: 32rpx 0;
		}
	}


	.workDetails>view:nth-child(1) {
		border-right: none;
		line-height: 1.5;
	}

	.cu-timeline {
		display: block;
		overflow: auto;
	}

	.cu-timeline .cu-time {
		width: 120upx;
		text-align: center;
		padding: 20upx 0;
		font-size: 26upx;
		color: #888;
		display: block;
	}

	.cu-timeline>.cu-item {
		padding: 31rpx 31rpx 31rpx 120rpx;
		position: relative;
		display: block;
		z-index: 0;
	}


	.cu-timeline>.cu-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1rpx;
		background-color: #afafaf;
		left: 60upx;
		height: 100%;
		top: 0;
		z-index: 8;
	}

	.cu-timeline>.cu-item::before {
		content: "";
		display: block;
		position: absolute;
		top: 65rpx;
		z-index: 9;
		border-radius: 50%;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(65, 134, 236, 0.3);
		border: 6rpx solid #1585FC;
		width: 20rpx;
		height: 20rpx;
		text-align: center;
		line-height: 20rpx;
		/* left: 45rpx; */
		left: 6.7%;
	}

	.cu-timeline>.cu-item>.content {
		padding: 30upx;
		border-radius: 6upx;
		display: block;
		line-height: 1.6;
	}

	.cu-timeline>.cu-item>.content+.content {
		margin-top: 20upx;
	}

	.cu-timeline>.cu-item>.nl-shadow-box {
		border-radius: 10rpx;
	}

	.workDetails {
		display: flex;
		align-items: center;
		padding: 20rpx 26rpx;
	}
	
	.agree{
		color: $uni-color-success
	}
	.refuse{
		color: $uni-color-error
	}
</style>
